<template>
  <div>
    <el-card class="table">
      <div slot="header" class="header">
        <div class="title">
          <el-divider direction="vertical" />
          {{ table.Title }}
        </div>
        <div class="opBtn">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit" />
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="drop"
          />
        </div>
      </div>
      <div class="oplist">
        <el-button type="primary" size="mini" icon="el-icon-edit" circle @click="editCol" />
      </div>
      <w-table
        :data="rows"
        :columns="columns"
        :is-paging="false"
        :is-show-no="isShowNo"
      >
        <template slot="control" slot-scope="e">
          <formControl :key="e.column.key" :value="e.row[e.column.key]" :control="colCache[e.column.key]" :source="e.row" />
        </template>
      </w-table>
    </el-card>
    <editFormTable :id="table.Id" :form-body="formBody" :table-body="table" :visible.sync="visible" @close="close" />
    <setTableCol :table="table" :form-body="formBody" :form-id="formId" :visible.sync="colVisible" @close="closeEdit" />
  </div>
</template>

<script>
import * as tableApi from '@/customForm/api/table'
import editFormTable from '../components/editFormTable.vue'
import setTableCol from './setTableCol.vue'
import formControl from '../components/formControl.vue'
export default {
  components: {
    editFormTable,
    setTableCol,
    formControl
  },
  props: {
    table: {
      type: Object,
      default: null
    },
    formBody: {
      type: Array,
      default: null
    },
    formId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      source: {},
      colVisible: false,
      isShowNo: false,
      rows: [],
      colCache: {},
      columns: []
    }
  },
  watch: {
    table: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    close(isSet, table) {
      if (isSet) {
        this.table.Title = table.Title
        this.table.IsHidden = table.IsHidden
        this.table.ColNum = table.ColNum
        this.table.LabelWidth = table.LabelWidth
        this.table.ColNum = table.ColNum
        this.table.SourceKey = table.SourceKey
      }
    },
    closeEdit(isRefresh) {
      if (isRefresh) {
        this.$emit('refresh')
      }
    },
    edit() {
      this.visible = true
    },
    editCol() {
      this.colVisible = true
    },
    reset() {
      if (this.table.TableSet != null) {
        this.isShowNo = this.table.TableSet.IsShowNo
      }
      const cols = []
      const row = {}
      if (this.table.Columns && this.table.Columns.length > 0) {
        this.table.Columns.forEach(a => {
          const col = {
            key: a.ColName,
            title: a.ColTitle,
            align: 'center',
            minWidth: a.Width == null ? '100px' : a.Width + 'px'
          }
          if (a.Children != null && a.Children.length > 0) {
            col.children = []
            this.initColumns(a, col, row)
          } else {
            col.slotName = 'control'
            this.colCache[col.key] = a
            row[a.ColName] = null
          }
          cols.push(col)
        })
      }
      this.columns = cols
      this.$nextTick(() => {
        this.rows.push(row)
      })
    },
    initColumns(column, col, row) {
      column.Children.forEach(a => {
        const t = {
          key: a.ColName,
          title: a.ColTitle,
          align: 'left',
          minWidth: a.Width == null ? '100px' : a.Width + 'px'
        }
        if (a.Children != null && a.Children.length > 0) {
          t.children = []
          this.initColumns(a, t)
        } else {
          this.colCache[t.key] = a
          t.slotName = 'control'
          row[a.ColName] = null
        }
        col.children.push(t)
      })
    },
    drop() {
      const title = '确认删除表单 ' + this.table.Title + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop()
      })
    },
    async submitDrop() {
      await tableApi.Delete(this.table.Id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.$emit('remove', this.table.Id)
    }
  }
}
</script>

  <style scoped>
  .table {
    margin-bottom: 10px;
  }
  .table .header {
    text-align: left;
  }
  .table .header .opBtn {
    float: right;
  }
  .table .header .title {
    font-size: 1.1rem;
    display: inline-block;
  }
  .table .header .title .el-divider--vertical {
    width: 4px;
    margin: 0;
    height: 1.2em;
    background-color: #0095ff;
  }
  .table .oplist {
    width: 100%;
    padding: 10px;
    text-align: right;
  }
  .table .el-date-editor.el-input {
    width: 100% !important;
  }
  .table .el-input-number--medium {
    width: 100% !important;
  }
  </style>
